<template>
  <ContentWrap>
    <div class="headBox flex-s">
      <div class="goBack flex-s" @click="goBack">
        <el-icon><ArrowLeftBold /></el-icon>
        <span class="ml-2 mr-12">返回</span>
      </div>
      <div>特种作业详情</div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">作业人信息</div>
      </div>
      <div v-if="formData.data.specialOperationPersonnel && formData.data.specialOperationPersonnel.length > 0">
        <div class="content_main" v-for="item in formData.data.specialOperationPersonnel" :key="item.id">
          <div class="main_title">作业类型：{{ specialTypeList.find(curr => curr.value === item.jobType)?.label }}</div>
          <el-table :data="item.employeeAttr">
            <el-table-column align="center" prop="name" label="姓名" />
            <el-table-column align="center" prop="photo" label="工种">
              <template #default="scope">
                {{ scope.row.getSkill.map(item => item.jobType).join('/') ? scope.row.getSkill.map(item => item.jobType).join('/') : '-' }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="idCard" label="身份证" />
            <el-table-column align="center" prop="phone" label="联系电话">
              <template #default="scope">
                {{ scope.row.phone ? scope.row.phone : '-' }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="getSkill" label="技能证书" >
              <template #default="scope">
                <div class="flex-c" v-if="scope.row.getSkill.map(item => item.skillCertificate).length > 0">
                  <div v-for="curr in scope.row.getSkill" :key="curr.skillCertificate">
                    <div class="mr-12" v-if="imgTypeList.includes(curr.certificateAttachment.slice(curr.certificateAttachment.lastIndexOf('.') + 1))">
                      <el-link target="_blank" @click="imgPreview(curr.certificateAttachment)">{{ curr.skillCertificate }}</el-link>
                    </div>
                    <el-link class="mr-12" v-else :href="curr.certificateAttachment" target="_blank">{{ curr.skillCertificate }}</el-link>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-empty v-else class="p-0" :image-size="100" description="暂无数据" />
    </div>
    <div class="content mb-0">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">特种作业信息</div>
      </div>
      <div class="content_main">
        <div class="flex-s">
          <div class="mr-50 flex-s"><div class="main_lable">作业编号：</div> {{ formData.data.jobNumber ? formData.data.jobNumber : '-' }}</div>
          <div class="mr-50 flex-s"><div class="main_lable">作业项目：</div> {{ formData.data.projectName ? formData.data.projectName : '-' }}</div>
          <div class="mr-50 flex-s"><div class="main_lable">作业时间：</div> {{ formData.data.jobTime ? formData.data.jobTime : '-' }}</div>
          <div class="mr-50 flex-s"><div class="main_lable">上传时间：</div> {{ formData.data.createTime ? formData.data.createTime : '-' }}</div>
          <div class="flex-s"><div class="main_lable">上传人：</div>{{ formData.data.employeeName ? formData.data.employeeName : '-' }}</div>
        </div>
        <div class="mt-12 flex-s">
          <div class="main_lable">作业附件：</div> 
          <div class="flex-s" v-if="formData.data.jobAttachment && formData.data.jobAttachment.length > 0">
            <div class="mr-50 flex-s" v-for="item in formData.data.jobAttachment" :key="item.url">
              <div v-if="imgTypeList.includes(item.extension)">
                <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
              </div>
              <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable">作业图片：</div> 
          <div class="imgBox flex-s" v-if="formData.data.sitePhotos && formData.data.sitePhotos.length > 0">
            <div v-for="(item,index) in formData.data.sitePhotos" :key="item">
              <el-image
                style="width: 200px; height: 100px"
                class="mr-30 mb-24"
                :src="item"
                :preview-src-list="formData.data.sitePhotos"
                :initial-index="index"
                show-progress
              />
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable flex-e">备注：</div> 
          <div class="flex-s">{{ formData.data.remark ? formData.data.remark : '-' }}</div>
        </div>
      </div>
    </div>
  </ContentWrap>
  <!-- 图片预览 -->
  <el-image-viewer
    v-if="showImagePreview"
    :zoom-rate="1.2"
    @close="closePreview"
    :url-list="[imgPreviewUrl]"
  />
</template>
<script setup>
  import {ref, reactive, inject} from "vue"
  import * as ContractApi from '@/api/viewsApi/contract'
  import { getSpecialDetail } from '@/api/viewsApi/specialWork'
  import { ArrowLeftBold } from '@element-plus/icons-vue'
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  const specialTypeList = getIntDictOptions(DICT_TYPE.SPECIAL_OPERATIONS_TYPE)
  const message = useMessage() // 消息弹窗
  const goBack = inject('goBack', () => {})
  const formData = reactive({
    data: {
      specialOperationPersonnel: [], // 作业人信息
      jobNumber: '', // 作业编号
      projectName: '', // 作业项目
      jobTime: '', // 作业时间
      createTime: '', // 上传时间
      employeeName: '', // 上传人
      jobAttachment: [], // 作业附件
    }
  })
  const loading = ref(false)
  const pageStatus = ref(1) // 1新增  2编辑
  const imgTypeList = ['jpg', 'jpeg', 'png', 'webp']
  /** 初始化 **/
  /** 查询详情信息 */
  const init = async (id) => {
    loading.value = true
    try {
      const data = await getSpecialDetail(id)
      formData.data = data
    } finally {
      loading.value = false
    }
  }
  const showImagePreview = ref(false)
  const imgPreviewUrl = ref('')
  const imgPreview = (url) => {
    imgPreviewUrl.value = url
    showImagePreview.value = true
  }

  const closePreview = () => {
    imgPreviewUrl.value = ''
    showImagePreview.value = false
  }




  defineExpose({
    init,
  })
</script>
<style lang="scss" scoped>
  .content{
      width: 100%;
      min-height: 80px;
      padding: 6px;
      margin-bottom: 24px;
      box-sizing: border-box;
      .content_head {
          margin-bottom: 24px;
          .line {
              width: 5px;
              height: 21px;
              background: #50B5FF;
          }
          .title {
              font-size: 18px;
              color: #333;
              margin-left: 12px;
              font-weight: 600;
          }
      }
      .content_main {
          width: 100%;
          padding: 0 16px;
          box-sizing: border-box;
          font-size: 14px;
      }
  }
  ::v-deep .el-form-item{
    width: 100%;
  }
  .formInp{
    width: 100%;
  }

  .headBox{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #1D1D1D;
  }

  .goBack {
      cursor: pointer;
  }
  .main_title {
    background: #e6e4e4;
    border-radius: 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    box-sizing: border-box;
    color: #1D1D1D;
  }
  .imgBox{
    width: calc(100% - 72px);
    flex-wrap: wrap;
  }
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  .main_lable{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    width: 72px;
    color: #1D1D1D;
  }

</style>
